<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/alert.css">
    <script src="../js/code.js"></script>
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->

    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 阻止表单默认提交  -> JS提交(自己设置验证规则 => 全都成功之后在提交) -->
    <form class="box" onsubmit="return false">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="登录">
        </p>
    </form>
</body>
<script>
    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头 (一步到位)

    // 从易到难的顺序(拆分判断)
    // a. 长度  6-12位
    // b. 不能以数字开头  
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _ $ 组成   6-12位

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111a  a1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA     1Aa   A1a        强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3

    // 手机号

    
    // 邮箱

    // !! 验证码:      ["a","b","c","d","e","f","g","h"]  => 从数组中随机四个字符形成验证码 (升级版: 不允许出现重复字符) 



    // 要求:
    // 1. 失焦时对 用户名 密码 手机号 邮箱 验证码 进行验证
    // 2. 用户名 密码 手机号 邮箱 全都正确的前提下  => 点击注册 弹出可以注册

</script>
<script type="module">
    import {myAlert} from "../js/alert.js";

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];
    
    var btn = document.getElementsByClassName("btn")[0];

    
    var isUserOk = false;
    var isPwdOk = false;
   
    userInp.onblur = function(){
        var user = userInp.value.trim();
        userInp.value = user;

        isUserOk = false;  // 每次失焦 先重置状态为false => 在重新验证

        var lenReg = /^\S{6,12}$/; // 长度验证规则
        var startReg = /^[^0-9]/;  // 非数字开头

        var combReg = /^[\w$]{6,12}$/;  // 包含 字母 数字 下划线 $ (6-12位) =>  所有的字符都必须在合法字符的范围内 不允许出现规则以外的内容
        var illegalReg = /[^\w$]/;  // 是否存在非法字符  => 只要有一个非法的 即失败 


        if(lenReg.test(user)){   // 长度验证

            if(startReg.test(user)){ // 非数字开头
                
                // illegalReg.test(user) === false
                if(!illegalReg.test(user)){ // 不存在非法字符


                    userSpan.textContent = "";   
                    userSpan.className = "user_span right";
                    isUserOk = true;

                }else{
                    userSpan.textContent = "用户名由数字 字母 下换线 $组成";    
                    userSpan.className = "user_span error";
                }

            }else{
                userSpan.textContent = "用户名不能以数字开头";    
                userSpan.className = "user_span error";
            }

        }else{
            userSpan.textContent = "用户名需要在6-12位之间";    
            userSpan.className = "user_span error";
        }
    } 




    pwdInp.onblur = function(){
        var pwd = pwdInp.value;
        var reg = /^[\w$]{6,12}$/;

        isPwdOk = false;

        if(reg.test(pwd)){  // 密码格式正确
            
            pwdSpan.textContent = "";   
            pwdSpan.className = "pwd_span right";
            isPwdOk = true;
        }else{
            pwdSpan.textContent = "由数字、大小写字母、_、$组成,6-12位";    
            pwdSpan.className = "pwd_span error";
        }
    }

    var isSend = false;
    btn.onclick = function(){
        if(!isUserOk){ // isUserOk == false
            alert("用户名有误,请先修改用户名");
        }else if(!isPwdOk){
            alert("密码有误,请先修改密码");
        }else {
            var user = userInp.value;
            var pwd = pwdInp.value;
         
            var xhr = new XMLHttpRequest();
            
            xhr.open("post","http://121.43.116.41/demo/php/login.php",true);

            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pwd=${pwd}`);


            // 如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。
            if(isSend){  // 如果请求已发送 -> 再次发送就会先终止前一个
                xhr.abort();
            }
            
            isSend = true;
            
            xhr.onload = function(){
                isSend = false;

                var res = xhr.responseText;
                console.log(res);
                res = JSON.parse(res);

                var {status,message} = res;

                if(status){
                    location.href = "./index.html";
                }else{
                    // alert(message);

                    myAlert.init({
                        content:message,
                    })

                }





                
            }




        }
    }
</script>

</html>